<template>
    <div class="rent">
        <h1 class="title">{{$t('message.moneyrecord')}}</h1>
        <div class="currency">
            <p>
                <span>{{$t('message.types')}}</span>
                <span>{{$t('message.Mentionmoney')}}</span>
                <span>{{$t('message.note')}}</span>
            </p>
            <p style="position: absolute; margin-top: 30px;">
                <el-select
                    @change="biChange"
                    v-model="value"
                    style="width: 100px;"
                    :placeholder="$t('message.selecta')"
                >
                    <el-option
                        v-for="item in biMsg"
                        :key="item.id"
                        :label="item.virtualWalletName"
                        :value="item.id"
                    ></el-option>
                </el-select>
                <span></span>
                <el-input v-model="input1" style="width: 350px;" :placeholder="$t('message.entercontent')"></el-input>
                <span></span>
                <el-input v-model="input2" style="width: 350px;" :placeholder="$t('message.entercontent')"></el-input>
            </p>
            <p>
                <span @click="addAddress">{{$t('message.add')}}</span>
            </p>
        </div>

        <h1 class="title" style="font-size:14px">{{$t('message.Addresslist')}}</h1>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="virtualWalletName" :label="$t('message.types')" min-width="80"></el-table-column>
            <el-table-column prop="address" :label="$t('message.Mentionmoney')" min-width="200"></el-table-column>
            <el-table-column prop="remark" :label="$t('message.note')" min-width="150"></el-table-column>
            <el-table-column prop="" :label="$t('message.operation')" min-width="50">
              <template slot-scope="scope">
               <span style="color:#6881FF" @click="deleteAddress(scope.row.id)">{{$t('message.delete')}}</span>
              </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import qs from "qs";
// import {
//     listVirtualWallet,
//     insertWithdrawAddress,
//     listWithdrawAddress,
//     deleteWithdrawAddress
// } from "../../api/api";
export default {
    data() {
        return {
            value: "", //所选币种
            input1: "",
            input2: "",
            biMsg: "", //币种
            tableData: [],
            token: sessionStorage.getItem("token")
        };
    },
    created() {
        this.getAllBi();
        this.addressList();
    },
    methods: {
        //删除提币地址
        deleteAddress(id){
          console.log(id)
          var params = {
                token: JSON.parse(this.token),
                virtualWalletId: id
            };
            deleteWithdrawAddress(qs.stringify(params)).then(res => {
                if(res.data.code == 200){
                  this.$message({
                    message:this.$t('message.Deletethe')
                  })
                  this.addressList();
                }else{
                  this.$message({
                    message:res.data.msg
                  })
                }
            });
        },
        //切换地址刷新列表
        biChange() {
            // this.addressList();
        },
        //地址列表
        addressList() {
            var params = {
                token: JSON.parse(this.token),
                virtualWalletId:""
            };
            listWithdrawAddress(qs.stringify(params)).then(res => {
                console.log(res.data);
                this.tableData = res.data.data
            });
        },
        //新增地址
        addAddress() {
            if (this.value == "" && this.input1 == "" && this.input2 == "") {
                this.$message({
                    message: this.$t('message.empty')
                });
                return false;
            }
            var params = {
                token: JSON.parse(this.token),
                virtualWalletId: this.value,
                address: this.input1,
                remark: this.input2
            };
            insertWithdrawAddress(qs.stringify(params)).then(res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.$message({
                        message: this.$t('message.Newsuccess')
                    });
                    this.addressList();
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        // 获取币种
        getAllBi() {
            listVirtualWallet().then(res => {
                console.log(res.data);
                this.biMsg = res.data.data;
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.rent {
    .title {
        font-size: 18px;
        font-weight: 700;
        background: rgba(247, 247, 251, 1);
        line-height: 40px;
        padding-left: 20px;
        width: 100%;
    }
    .currency {
        padding: 20px;
        box-sizing: border-box;
        p {
            span {
                padding: 15px;
            }
        }
        p:nth-child(1) {
            span {
                display: inline-block;
                width: 130px;
                color: #999;
                padding: 5px;
                box-sizing: border-box;
            }
            span:nth-child(2) {
                margin-right: 250px;
            }
        }
        p:nth-child(3) {
            line-height: 100px;
            height: 100px;
            text-align: end;
            span {
                // float: right;
                padding: 10px 30px;
                background: linear-gradient(
                    -90deg,
                    rgba(104, 129, 255, 1),
                    rgba(115, 156, 255, 1)
                );
                border-radius: 10px;
                font-size: 18px;
                color: aliceblue;
                position: relative;
            }
        }
    }
}
</style>
